<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>新建雷达</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		/*公共头部带搜索*/
		.public_container{
			margin: 20px;
			background: #fff;
		}
		.public_title_container{
			height: 54px; 
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			background: #f9f9f9;
			border-bottom: 1px solid #f0f0f0;
		}
		/*公共表单部分*/
		.public_form_container{
			padding: 20px 20px 40px 20px;
		}
		.public_form_content{
			padding: 24px 40px 24px 0;
			background: #fff;
			border: 1px solid #e9e9e9;
			margin-bottom: 8px;
		}
		.public_form_List{
			margin-bottom: 10px;
		}
		.public_form_List:last-child{
			margin-bottom: 0px;
		}
		.public_formTitle_container lable{
			font-size: 13px;
			font-weight: bold;
		}
		.linktRack_container{
			padding: 0px 30px 15px 30px;
		}
		.addLable_container{
			margin-top: 15px;
		}
		.addLable_content{
			display: flex;
			/*align-items: center;*/
			padding-left: 28px;
		}
		.addLable_content span{
			color: #1890ff;
			border: 1px solid #1890ff;
			height: 32px;
			padding: 0 15px;
			font-size: 14px;
			border-radius: 4px;
			line-height: 32px;
			cursor: pointer;
			margin-right: 10px;
		}
		.LableAdded_container{
			background: #fbfbfb;
			border-radius: 4px;
			padding: 7px 9px 7px 14px;
			border: 1px solid #e9e9e9;
			margin-right: 10px;
			margin-bottom: 8px;
			display: flex;
			align-items: center;
		}
		.LableAdded_container b{
			color: #1e1e1e;
			font-size: 14px;
			font-weight: 400;
		}
		.LableAdded_container svg{
			width: 12px;
			height: 12px;
			fill: #565656;
			padding-left: 5px;
			cursor: pointer;
		}
		.grade_container{
			padding: 20px 0 0 0;
		}
		.grade_content{
			align-items: center;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 7px;
		}
		.grade_content svg{
			fill: #a9a9a9;
			width: 14px;
			height: 14px;
			margin-right: 9px;
			cursor: pointer;
		}
		.grade_content b{
			color: rgba(0,0,0,.65);
			font-size: 14px;
		}
		.grade_content p{
			font-size: 14px;
			color: #000;
		}
		.customerManagement_select_container{
			margin:0 8px;
		}
		.grade_input_contianer{
			display: flex;
			align-items: center;
			margin: 0 8px;
			width: 50px;
		}
		.layui-form-switch{
			margin-top: 0;
			margin-left: 10px;
		}
		.grade_addrule_container{
			display: flex;
			align-items: center;
			cursor: pointer;
			padding-top: 10px;
		}
		.grade_addrule_container svg{
			fill: #6fc1ff;
			width: 14px;
			height: 14px;
			margin-right: 5px;
		}
		.grade_addrule_container p{
			color: #6fc1ff;
			font-size: 14px;
		}
		.grade_cumulative_content{
			display:flex;
			align-items: center;
		}
		#checkLableCon{
			overflow: hidden;
		}
		#checkLableCon span{
			float: left;
			display: block;
		}
	</style>
</head>
<body>
	<form class="layui-form" id="form">
		

		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>新建雷达</p>
				</div>

			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">链接标题：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block">
								<input type="text" name="link_title" required value="{$radar->link_title}" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
				</div>

				<div class="public_form_content">
					<div class="public_form_List">
						<div class="public_formTitle_container">
							<lable class="layui-form-label">文件类型：</lable>
						</div>
						<div class="public_formOther_container">
							<div class="layui-input-block" id="shareType">
								<input type="radio" lay-filter="shareType" name="shareType" value="1" title="链接" {if $radar->type == 1}checked{/if}>
								<input type="radio" lay-filter="shareType" name="shareType" value="2" title="图文" {if $radar->type == 2}checked{/if}>
							</div>
						</div>
					</div>
					<!-- 链接 -->
					<div class="link_info" id="link_info">
							<div class="public_form_List publicHide_content" id="textcontainer" style="display: block;">
								<div class="layui-input-block">
									<input type="text" name="link" id="link_input_click" value="{$radar->link}" required  lay-verify="required" placeholder="请在此输入链接" autocomplete="off" class="layui-input">
								</div>
								<div>
									<span class="link_info_error" style="display: none;" id="error_info1">请输入有效网址,必须以http://或https://开头</span>
								</div>
							</div>
							<div class="public_form_List">
								<div class="public_formTitle_container">
									<lable class="layui-form-label">标题：</lable>
								</div>
								<div class="public_formOther_container">
									<div class="layui-input-block">
										<input type="text" name="title" id="link_input_title" value="{$radar->title}"   placeholder="标题" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="public_form_List">
								<div class="public_formTitle_container">
									<lable class="layui-form-label">描述：</lable>
								</div>
								<div class="public_formOther_container">
									<div class="layui-input-block">
										<input type="text" name="description" id="link_input_description"  value="{$radar->description}"  placeholder="描述" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
						<div class="public_form_List publicHide_content">
							<div class="public_formTitle_container">
								<lable class="layui-form-label">图片：</lable>
							</div>
							<div class="public_formOther_container">
								<div class="layui-input-block">
									<img onerror="this.style.display='none'" id="image_url_pic" src="{$radar->image_url}" style="width: 100px; height: 100px;">
									<input type="hidden" name="image_url" id="image_url" value="{$radar->image_url}" />
									<button type="button" class="layui-btn select_img" data-target="image_url">
									  <i class="layui-icon">&#xe67c;</i>上传图片
									</button>

								</div>
							</div>
						</div>
					</div>
					<!-- PDF -->
					<div class="public_form_List publicHide_content" id="imgcontainer" style="display: none;">
						<div class="public_form_List">
							 <div class="layui-form-item">
							    <label class="layui-form-label">图文：</label>
							    <div class="layui-input-block">
							      <select name="graphic_id" id="graphic_id" lay-filter="aihao">
							        <option value="">请选择图文</option>
							        {loop $graphic as $graphics}
							        	{if $graphics['id'] == $radar->graphic_id}
							        		<option value="{$graphics['id']}" selected>{$graphics["title"]}</option>
							        	{else}
							        		<option value="{$graphics['id']}">{$graphics["title"]}</option>
							        	{/if}
							        {/loop}
							      </select>
							    </div>
							  </div>
						</div>
					</div>
				</div>

			</div>
			<!-- 公共表单部分 end-->
		</div>

		<div class="public_container">
			<!-- /*公共头部带搜索*/ -->
			<div class="public_content">
				<div class="public_title_container">
					<p>链接追踪设置</p>
				</div>

			</div>
			<!-- /*公共头部带搜索*/ end -->
			<!-- 公共表单部分 -->
			<div class="public_form_container">
				<div class="public_form_content">
					<div class="linktRack_container">
						<input type="checkbox" name="behavior_inform" value="1" lay-skin="primary" title="行为通知 （当客户点击雷达时，发送雷达的员工将会收到消息提醒）"  {if $radar->behavior_inform == 1}checked{/if}>
					</div>
					<div class="linktRack_container">
						<input type="checkbox" name="dynamic_inform" value="1" lay-skin="primary" title="动态通知 （当客户点击雷达时，会将客户的打开行为记录在客户动态里）" {if $radar->dynamic_inform == 1}checked{/if}>
					</div>
					<div class="linktRack_container">
						<input type="checkbox" id="addLable" name="addLable" value="1" lay-skin="primary" lay-filter="addLable" title="客户标签 （给点击雷达的客户打上选中的标签）"  {if $radar->ex_tag_inform == 1}checked{/if}>
						<input type="hidden" name="checkLable" value="{implode(',',json_decode($radar->ex_tag,1))}" data-tag="{$radar->e_tag}" id="checkLable" />
						<div class="addLable_container" style="display: none;">
							<div class="addLable_content">
								<span>+添加标签</span>
								<div id="checkLableCon"></div>
							</div>
						</div>
					</div>
				</div>		
			</div>
			<!-- 公共表单部分 end-->
		</div>

		<div class="public_container" style="background: none;">
			<a class="layui-btn" lay-submit lay-filter="formDemo">提交并创建</a>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script type="text/javascript">
		function delRow(obj){
			$(obj).parent().remove();
		}
		// $('.LableAdded_container svg').on('click',function(){
		// 	$(this).parent().remove();
		// })

		// $('.grade_content svg').on('click',function(){
		// 	$(this).parent().remove();
		// })

		$('.grade_addrule_container').on('click',function(){
			$('.grade_addrule_container').before('<div class="grade_content"><svg onclick="delRow(this)" t="1601459440205"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="3308"width="200"height="200"><path d="M924.549 337.707c-22.553-53.321-54.833-101.202-95.943-142.312-41.11-41.11-88.991-73.39-142.313-95.943-55.221-23.357-113.861-35.2-174.293-35.2S392.928 76.095 337.707 99.451c-53.321 22.553-101.202 54.833-142.312 95.943-41.11 41.11-73.39 88.991-95.943 142.312-23.357 55.222-35.2 113.862-35.2 174.294s11.843 119.072 35.199 174.293c22.553 53.321 54.833 101.202 95.943 142.313 41.11 41.11 88.991 73.391 142.312 95.943 55.221 23.356 113.862 35.199 174.293 35.199s119.072-11.843 174.293-35.199c53.321-22.553 101.202-54.833 142.313-95.943s73.391-88.991 95.943-142.313c23.356-55.221 35.199-113.861 35.199-174.293s-11.842-119.072-35.198-174.293zM512 896.252c-211.877 0-384.252-172.375-384.252-384.252S300.123 127.748 512 127.748 896.252 300.123 896.252 512 723.877 896.252 512 896.252z"p-id="3309"></path><path d="M740 480H284c-15.464 0-28 14.327-28 32s12.536 32 28 32h456c15.464 0 28-14.327 28-32s-12.536-32-28-32z"p-id="3310"></path></svg><b>规则1：</b><p>用户</p><div class="customerManagement_select_container"><select name="city"lay-filter="second"><option value="0">每打开一次时</option><option value="1">累计打开次数</option></select></div><div class="grade_cumulative_content"style="display: none;"><p>达到</p><div class="grade_input_contianer"><input type="text"name="title"required lay-verify="required"placeholder=""autocomplete="off"class="layui-input"></div><p>次</p></div><p>时，可评</p><div class="grade_input_contianer"><input type="text"name="title"required lay-verify="required"placeholder=""autocomplete="off"class="layui-input"></div><p>分并打上标签</p><input type="checkbox"name="close"lay-skin="switch"lay-filter="switch"lay-text="ON|OFF"><div class="customerManagement_select_container switchLabel_container"style="display: none;"><select name="city"lay-verify="required"><option value=""></option><option value="0">一般</option><option value="1">好</option><option value="2">稳定</option><option value="3">极佳</option><option value="4">差</option></select></div></div>')
			layui.use('form', function(){
				var form = layui.form;
				form.render();
			})
		})
	</script>
	<script type="text/javascript">
		// 上传
		layui.use('upload', function(){
			var upload = layui.upload;

		  //执行实例
		  var uploadInst = upload.render({
		    elem: '#uploadImg' //绑定元素
		    ,url: '/upload/' //上传接口
		    ,done: function(res){
		      //上传完毕回调
		  }
		  ,error: function(){
		      //请求异常回调
		  }
		});
		});
		// 弹窗
		layui.use('layer', function(){
			var layer = layui.layer;
		}); 
		// 表单
		layui.use('form', function(){
			var form = layui.form;

		  //监听提交
		  form.on('submit(formDemo)', function(data){
		  	// layer.msg(JSON.stringify(data.field));
		  	// return false;
		  	var formData = $('#form').serialize();	
			myAjaxPost(false, true, '', formData, function (resp) {
				// 清除定时器
				clearTimeout(itimd);
				if(resp.status == 'success') {
					layer.msg(resp.msg);
					var itimd=setInterval(function(){
						location.href = 'radar_list.html';
						// 清除定时器
						clearTimeout(itimd);
					},1500);
				}
				else{
					alert(resp.msg);
				}
			});
		  });

		  form.on('checkbox(addLable)', function (data) {
		  	if (data.elem.checked){
		  		$('.addLable_container').show();
		  	}else{
		  		$('.addLable_container').hide();
		  	}
		  });

		  form.on('checkbox(grade)', function (data) {
		  	console.log(data.elem.checked);
		  	console.log($(this));
		  	if (data.elem.checked){
		  		$('.grade_container').show();
		  	}else{
		  		$('.grade_container').hide();
		  	}
		  });

		  form.on('radio(shareType)', function (data) {
                if ($('#shareType input[name="shareType"]:checked').val() == "1") {
                    $("#imgcontainer").hide();
                	$("#graphic_id").attr("lay-verify","false");
                	$("#link_info").show();
                }
                else if($('#shareType input[name="shareType"]:checked').val() == "2"){
                	$("#link_info").hide();
                	$("#link_input_click").attr("lay-verify","false");
                	$("#graphic_id").attr("lay-verify","required");
                	$("#imgcontainer").show();
                }
                
                form.render();
            });

		  form.on('switch(switch)',function (data) {
		   //开关是否开启，true或者false
		   var checked = data.elem.checked;
		   console.log(checked);
		   if(checked){
		   	$('.switchLabel_container').show()
		   }else {
		   	$('.switchLabel_container').hide()
		   }
		   form.render();
		  });

		  form.on('select(second)', function(data){
		   console.log(data.value); //得到被选中的值
		   if(data.value == 0){
		   	$('.grade_cumulative_content').hide();
		   }else if(data.value == 1){
		   	$('.grade_cumulative_content').show();
		   }
		  }); 
		});
	</script>
	<script type="text/javascript">
		$('.addLable_content span').on('click',function(){
			layer.open({
				type: 2,
				title: '请选择标签',
				shadeClose: true,
				shade: 0.2,
				area: ['700px', '530px'],
				content: 'select_tag.html'
			}); 
		})
	</script>
	<script type="text/javascript">
		$('#link_input_click').bind('input propertychange',function(){
			// console.log(3333);
			var link_url = $(this).val();
			console.log(link_url);
			var pregh = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/;
			    res =  link_url.match(pregh);
			    console.log(res);	
			    if(res){
			    	$('.link_info_error').css('display','none');
			    	// $('.link_info').css('display','');
			
			    	myAjaxPost(false, true, 'select_url_cont.html', { url:link_url}, function (resp) {
			    		console.log(resp);
						if (resp.status == 'success') {
							if(resp.data.hasOwnProperty('title')){
								$('#link_input_title').val(resp.data.title);
							}
							if(resp.data.hasOwnProperty('description')){
								$('#link_input_description').val(resp.data.description);
							}
						}else{
							// $('#link_input_tiles').val();
						}
					});
			    }else{
			    	$('.link_info_error').css('display','');
			    	// $('.link_info').css('display','none');
			    }
		});

		layui.use(['element', 'layer', 'upload'], function () {
		  var layer = layui.layer;
		});
		$('.select_img').on('click',function  () {
		  var targetId=this.getAttribute('data-target');
		  layer.open({
			title:'图片库',
			type: 2,
			area: ['700px', '450px'],
			fixed: false, //不固定
			maxmin: false,
			content: '/imgLib/lib.html?type=vshop_img&target='+targetId
		  });
		});

		window.uploadImgCallback=function (tgt,url) {
		  console.log('选择图片结果',tgt,url);
		  if(tgt=='image_url'){
			var inputEle=$('#image_url');
			var prevEle=$('#image_url_pic');
			inputEle.val(url);
			prevEle.attr('src',url);
			prevEle.show();
		  }
		};
	</script>
	<script type="text/javascript">
		$(document).ready(function() { 
			var ex_tag = $('#checkLable').data('tag');
			console.log(ex_tag);
			if(ex_tag){
				tag_arr = ex_tag.split(',');
				html = '';
				for (var i = 0; i < tag_arr.length; i++) {
					html += '<span><b>'+tag_arr[i]+'</b></span>&nbsp;';
				}
				$("#checkLableCon").append(html);
				$('.addLable_container').show();
			}

			var title = $('#link_input_title').val();
			var desc = $('#link_input_description').val();
			var imgurl = $('#image_url').val();
			if(title || desc || imgurl){
				$('#image_url_pic').show();
				$('.link_info_error').css('display','none');
			    $('.link_info').css('display','');
			}
		}); 
	</script>
	<script type="text/javascript">
		window.onload = function () {
		if ($('#shareType input[name="shareType"]:checked').val() == "1") {
                $("#imgcontainer").hide();
            	$("#graphic_id").attr("lay-verify","false");
            	$("#link_info").show();
            }else if($('#shareType input[name="shareType"]:checked').val() == "2"){
            	$("#link_info").hide();
            	$("#link_input_click").attr("lay-verify","false");
            	$("#graphic_id").attr("lay-verify","required");
            	$("#imgcontainer").show();
            }
        }
	</script>
</body>
</html>